import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
 
/// @Description: 自定义步骤条
///
 
class StepsWidget extends StatefulWidget {
  const StepsWidget({Key? key, required this.currentIndex, required this.items}) : super(key: key);
  ///步骤数组
  final List items;

  ///当前进度
  final int currentIndex;
 
  @override
  _StepsWidgetState createState() => _StepsWidgetState();
}
 
class _StepsWidgetState extends State<StepsWidget> {
  // var _items = ["提交申请", "客服审核", "商家收货","商家处理","完成"];
 
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Tools.fromHex("#FF7254"),//这里传
      height: 60.h,
      // alignment: Alignment.center,
      width: double.infinity,
      child: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: widget.items.length,
          itemBuilder: (context, index) {
            //如果显示到最后一个并且Icon总数小于200时继续获取数据
            return _buildItem(index);
          }),
    );
  }
 
  Widget _buildItem(int index) {
    return Container(
      padding: EdgeInsets.only(top: 8.h),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Opacity(
                opacity: index == 0 ? 0 : 1,
                child: Container(
                  width: 26.w,
                  height: 1,
                  decoration: BoxDecoration(
                      color: index <= widget.currentIndex
                          ? Colors.white
                          : Colors.white30),
                ),
              ),
              Container(
                child: 
                index <= widget.currentIndex
                    ? Icon(Icons.check_circle,color: Tools.fromHex("#ffffff"),size: 18,)
                    :  Icon(Icons.check_circle,color: Colors.white30,size: 18)
              ),
              Opacity(
                opacity: widget.items.length - 1 == index ? 0 : 1,
                child: Container(
                  width: 26.w,
                  height: 1,
                  decoration: BoxDecoration(
                      color: index < widget.currentIndex
                          ? Colors.white
                          : Colors.white30),
                ),
              )
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: 15.h),
            child: Text(
              widget.items[index],
              style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w300,
                  color: index <= widget.currentIndex
                      ? Colors.white
                      : Colors.white54),
            ),
          )
        ],
      ),
    );
  }
}